<div class="modal-body">
	<form id="user-form" name="user-form" class="form-horizontal">
		<input type="hidden" name="id" id="userId">
		<input type="hidden" name="createTime" data-flag="date" data-format="yyyy-MM-dd HH:mm:ss">
		<input type="hidden" name="deleted">
		<div class="box-body" style="height:400px">
			<div class="col-md-5" style="border:1px solid #DDD;height:400px;margin-left:20px;OVERFLOW-Y: auto; OVERFLOW-X:hidden;">
				<table>
					<tbody id="source" >
					
					</tbody>
				</table>
			</div>
			<div class="col-md-1" style="width:20px">
				
			</div>
			<div class="col-md-6" style="border:1px solid #DDD;height:400px">
				<table>
				<tbody id="chooseValue" >
				
				</tbody>
				</table>
			</div>
		</div>
		<br/>
	</form>
</div>
<script type="text/javascript">
	var role_id = null;
	$(document).ready( function(){
		role_id = Dtable_roleInfo.rows('.selected').data()[0].id;
		initAllUserList();
		initUserChooseList(role_id);
	});
	
	function initAllUserList(){
		var url = "../../tbl_user/list";
		var paramMap = {};
		paramMap.pagesize = 9999;
		var json_data = JSON.stringify( paramMap );
		$.ajax({
			  url: url,
			  type : 'post',
			  async : false,
			  data: json_data,
			  contentType: "application/json; charset=utf-8",
			  dataType: "json",
			  success: function( json ) {
				  if( json.data ){
					  $("#source").html("");
					  $(json.data).each(function(){
						  $str="";
					      $str+="<tr style='cursor:pointer' name='perm_source_row' id='"+ this.id +"' align='center' height='25' >";
					      $str+="<td>"+ this.name +"("+this.login_name+")</td>";
					      $str+="</tr>";
					      $("#source").append($str);
					  });
					  styleRowSource();
				  }
			  }
		});
	}
	
	function initUserChooseList( role_id ){
		var url = "../../tbl_user_role/list";
		var paramMap = {};
		paramMap.role_id = role_id;
		paramMap.needUserInfo = true;
		paramMap.pagesize = 9999;
		var json_data = JSON.stringify( paramMap );
		$.ajax({
			  url: url,
			  type : 'post',
			  async : false,
			  data: json_data,
			  contentType: "application/json; charset=utf-8",
			  dataType: "json",
			  success: function( json ) {
				  if( json.data ){
					  $("#chooseValue").html("");
					  $(json.data).each(function(){
						  $str="";
					      $str+="<tr style='cursor:pointer' name='perm_choose_row' id='"+ this.id +"' align='center' height='25'>";
					      $str+="<td>"+ this.user_name +"("+this.login_name+")</td>";
					      $str+="</tr>";
					      $("#chooseValue").append($str);
					  });
					  styleRowChoose();
				  }
			  }
		});
	}
	
	function addUserRole( user_id ){
		var url = "../../tbl_user_role/save";
		var paramMap = {};
		paramMap.user_id = user_id;
		paramMap.role_id = role_id;
		var json_data = JSON.stringify( paramMap );
		$.ajax({
			  url: url,
			  type : 'post',
			  async : false,
			  data: json_data,
			  contentType: "application/json; charset=utf-8",
			  dataType: "json",
			  success: function( json ) {
				  initUserChooseList( role_id );
			  }
		});
	}
	
	function deleteUserRole( id ){
		var url = "../../tbl_user_role/" + id;
		$.ajax({
			  url: url,
			  type : 'delete',
			  async : false,
			  contentType: "application/json; charset=utf-8",
			  dataType: "json",
			  success: function(json) {
				  initUserChooseList( role_id );
			  }
		});
	}
	
	function styleRowSource(){
		$("[name='perm_source_row']").click(function(){
			addUserRole( this.id );
		});
		$("[name='perm_source_row']").mouseover(function(){
			$(this).css("background-color","red");
			$(this).css("color","white");
		});
		$("[name='perm_source_row']").mouseout(function(){
			$(this).css("background-color","white");
			$(this).css("color","black");
		});
	}
	
	function styleRowChoose(){
		$("[name='perm_choose_row']").click(function(){
			deleteUserRole( this.id );
		});
		$("[name='perm_choose_row']").mouseover(function(){
			$(this).css("background-color","red");
			$(this).css("color","white");
		});
		$("[name='perm_choose_row']").mouseout(function(){
			$(this).css("background-color","white");
			$(this).css("color","black");
		});
	}
</script>